<template>
  <div class="warningDetail">
    <div class="top">
      <div class="left">
        <img :src="shopIcon" alt="">
      </div>
      <div class="right">
        <div class="name">{{merchantData.merchantName}}</div>
        <div class="shop_detail">
          <div class="d_1">
            <span>法定代表人：</span>
            <span class="bule">{{merchantData.name}}</span>
          </div>
          <div class="d_1">
            <span>注册资本：</span>
            <span>{{merchantData.registeredFund}}万人民币</span>
          </div>
          <div class="d_1">
            <span>地址：</span>
            <span>{{merchantData.address}}</span>
          </div>
        </div>
        <div class="level">
          <el-tooltip class="item lable" effect="dark" placement="bottom">
            <div slot="content">风险等级由蜜链盟大数据风控系统综合计算得出<br />等级分类包含：低、中等、高、很高</div>
            <el-button>
              <div class="txt">风险等级<img src="@/static/wenhao.svg" alt="">：</div>
            </el-button>
          </el-tooltip>
          <div class="level_list">
            <span class="tooltiptext" v-if="riskLevel == 4">很高</span>
            <span class="tooltiptext" v-if="riskLevel == 3">高</span>
            <span class="tooltiptext orange" v-if="riskLevel == 2">中等</span>
            <span class="tooltiptext green" v-if="riskLevel == 1">低</span>
            <div :class="[formattingColor(riskLevel)]" class="list" v-for="item in riskLevel" :key="item"></div>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="lookDetail()">商家详情</el-button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef">
          <div class="" v-for="item in type" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
            :value="item.id" @click="handleTab(item.id)" style="cursor: pointer;">
            {{ item.value }} <span>({{ item.num }})</span>
          </div>
        </div>
      </div>
      <div class="main-content">
        <onebox v-if="currentNavtab == 4" :merchantId='merchantId'></onebox>
        <twobox v-else-if='currentNavtab == 1' :merchantId='merchantId'></twobox>
        <threebox v-else-if='currentNavtab == 3' :merchantId='merchantId'></threebox>
      </div>
    </div>
  </div>
</template>
<script>
  // components
  import onebox from "./components/onebox";
  import twobox from "./components/twobox";
  import threebox from "./components/threebox";
  // api
  import {
    judicialDetail,
    riskCount
  } from "@/api/warningComplaint";

  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "warningDetail",
    components: {
      onebox,
      twobox,
      threebox,
    },
    mixins: [handlePageMixin],
    data() {

      return {
        loading: false,
        options: [

        ],
        aa: 4,
        detailDialog: false,
        currentNavtab: '',
        type: [{
            id: 4,
            value: "司法风险",
            num: 0
          },
          {
            id: 1,
            value: "经营风险",
            num: 0
          },
          {
            id: 3,
            value: "法人预警",
            num: 0
          },
          // { id: 2, value: "申诉预警",num:0},
        ],
        merchantData: {},
        merchantId: '',
        shopIcon: '',
        riskLevel: Number,
      };
    },
    created() {

      this.merchantId = this.$route.query.merchantId
      this.currentNavtab = this.$route.query.type
      this.getDetail();
      this.getriskCount()
    },
    mounted() {},
    methods: {
      //预警商家信息
      getDetail() {
        var merchantId = this.merchantId
        judicialDetail(merchantId)
          .then((res) => {
            console.log("预警商家信息", res);
            this.merchantData = res.result
            this.shopIcon = this.$IMG_URL + res.result.shopIcon
            this.riskLevel = parseInt(res.result.riskLevel)
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //查询预警信息统计
      getriskCount() {
        var merchantId = this.merchantId
        riskCount(merchantId)
          .then((res) => {
            console.log("预警商家信息", res);
            this.type[0].num = res.result.merchantJudicialRiskCount;
            this.type[1].num = res.result.operationRiskCount;
            this.type[2].num = res.result.legalPersonRiskCount;
            this.type[3].num = res.result.appealCount;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //切换选项
      handleTab(id) {
        this.currentNavtab = id
      },
      //查看商家详情
      lookDetail(e) {
        console.log(e);
        this.$router.push({
          path: "/insuranceUnderwriting/merchantsDetail",
          query: {
            id: this.merchantData.id,
            name: this.merchantData.merchantName,
          },
        });
        // this.$router.push({
        //   path: "/merchants/merchants-detail",
        //   query: {
        //     id: this.merchantData.shopManageId,
        //     name: this.merchantData.merchantName,
        //     merchantId: this.merchantData.id
        //   },
        // });
      },
      formattingColor(data) {
        if (data == 1) {
          return 'green'
        } else if (data == 2) {
          return 'orange'
        } else {
          return 'red'
        }
      }

    },
  };

</script>
<style lang="scss" scoped>
  @import "./style/warningDetail";

  .el-select .el-input {
    width: 130px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .level {
    ::v-deep .el-button {
      border: none;
    }
  }

</style>
